var datas = [
    {
        type: '化妆品',
        list: [
            {
                name: '化妆品1',
                link:'http://www.baidu.com',
                img:'./img/09c3656f9c686eca.jpg.dpg',
                price: 998,
                max:5
            },
            {
                name: '化妆品2',
                link:'http://www.baidu.com',
                img:'./img/09c3656f9c686eca.jpg.dpg',
                price: 888,
                max:2
            },
            {
                name: '化妆品3',
                link:'http://www.baidu.com',
                img:'./img/ca730b93accee7b9.jpg.dpg',
                price: 1098
            }
        ]
    },
    {
        type: '女装',
        list: [
            {
                name: '女装1',
                link:'http://www.baidu.com',
                img:'./img/ca730b93accee7b9.jpg.dpg',
                price: 198,
                max:10
            },
            {
                name: '女装2',
                link:'http://www.baidu.com',
                img:'./img/ca730b93accee7b9.jpg.dpg',
                price: 288
            },
            {
                name: '女装3',
                link:'http://www.baidu.com',
                img:'./img/ca730b93accee7b9.jpg.dpg',
                price: 398
            }
        ]
    },
    {
        type: '男装',
        list: [
            {
                name: '男装1',
                link:'http://www.baidu.com',
                img:'./img/ca730b93accee7b9.jpg.dpg',
                price: 98
            },
            {
                name: '男装2',
                link:'http://www.baidu.com',
                img:'./img/ca730b93accee7b9.jpg.dpg',
                price: 88
            },
            {
                name: '男装3',
                link:'http://www.baidu.com',
                img:'./img/ca730b93accee7b9.jpg.dpg',
                price: 78
            },
            {
                name: '男装4',
                link:'http://www.baidu.com',
                img:'./img/47e35bd2d1b5959a.jpg.dpg',
                price: 78
            }
        ]
    }
];

function $(sel){
    return document.querySelector(sel);
}

let typeEle = $('.type');
let box_right=$('.box_right');
let indexNum = 0;
// 渲染数据
function renderData(){
    let ul_html = '';
    let box_html=''
    datas.forEach(function(obj,idx){
        let li = '<li data-id="'+ idx+ '">';
        let div ='<div data-id="'+ idx+ '">';
        let item= ''
        if(idx == indexNum) {
            li = '<li class="active" data-id="'+ idx+ '">';
            div = '<div class="show" data-id="'+ idx+ '">'
        }
        ul_html += li + obj.type + '</li>';
        
        // 渲染具体的产品信息
        item = obj.list.map(function(data,idex){
            return ` <div class="item" data-id='${idx}-${idex}'>
                        <p><input type="checkbox" ></p>
                        <div class="img">
                            <a href="${data.link}" target="_blank">
                                <img src="${data.img}" alt="">
                            </a>
                        </div>
                        <h4>
                            <a href="${data.link}" target="_blank">${data.name}
                            </a>
                        </h4>
                        <h5>${data.price}</h5>
                    <div class="num">
                        <span class="sub"> - </span>
                        <span ><input type="text" value="1" data-max='${data.max}'></span>
                        <span class='add'> + </span>
                    </div>
                    <a class="delete">删除</a>
                </div>`
        }).join('')
        box_html+=div + item + '</div>'
    });
    typeEle.innerHTML = ul_html;
    box_right.innerHTML=box_html
}
renderData();


// 给type绑定点击事件
typeEle.addEventListener('click',function(e){
    let target = e.target
    if(target.nodeName=== 'LI'){
        // 获取target下的元素属性
        let id = target.getAttribute('data-id')
        // 获取内容下的所有子元素
        let divs = box_right.children
        // 判断是否有active和 show 类
        let active = $('.active')
        let show = $('.show')
        active && active.classList.remove('active')
        show && show.classList.remove('show')
        // 给点击的li 添加高亮并将内容展示
        target.classList.add('active')
        divs[id].classList.add('show')
    }
})



// 给box-right绑定点击事件
box_right.addEventListener('click',function(e){
    let target = e.target; 
    let total = $('#total');
    let inp,add,sub,num,max;
    // 给span绑定点击事件
    if(target.nodeName==='SPAN'){
        if(target.classList.contains('add')){
            let inp = target.previousElementSibling.firstElementChild
            num = inp.value;
            max = target.previousElementSibling.firstElementChild.getAttribute('data-max')
            num++;
            if(num>max){
                alert(`该商品最多可购买${max}件`)
                return;
            }
            inp.value = num; 
        }else if(target.classList.contains('sub')){
            let inp= target.nextElementSibling.firstElementChild
            num = inp.value*1;
            if(num == 1) return;
            num--;
            inp.value = num;
        }
        countALL()
    }
    // 给删除绑定点击事件
    if(target.nodeName === 'A'){
        let ok = confirm('是否从购物车中删除该商品')
        if(!ok) return;
        let index = target.parentNode.getAttribute('data-id').split('-'),
            idx = index[0],
            idex = index[1];
        datas[idx].list.splice(idex,1)
        indexNum = idx
        renderData()
        countALL()
    }
})

// 给文本框设置条件
let inps = [...box_right.querySelectorAll('input[type=text]')]
inps.forEach(function(input){
    input.addEventListener('input',function(){
        let num = input.value*1;
            max = input.getAttribute('data-max')
        if(num>=max){
            setTimeout(function(){
                input.value = max
            },500)
        }else if(num<=1){
            setTimeout(function(){
                input.value = 1
            },500)
        }
        countALL()
    })
})

// 封装统计总价和总数的函数
function countALL(){
    let ipts =[...box_right.querySelectorAll('input[type=text]')]
    let total = 0,
        price = 0,
        totalPrice = 0;
    ipts.forEach(function(obj){
        total += obj.value*1;
        price = obj.parentNode.parentNode.previousElementSibling.innerHTML*1;
        totalPrice += price*obj.value
    })
    $('#total').innerHTML = total;
    $('#price').innerHTML = totalPrice;
}
countALL()

// 给全选绑定事件
$('#checkall').addEventListener('change',function(e){
    let checkbox = [...box_right.querySelectorAll('input[type=checkbox]')]
    checkbox.forEach(function(check){
        check.checked = $('#checkall').checked
    })
})

// 删除选中商品
$('.del').onclick = function(){
    let inps = [...box_right.querySelectorAll('input[type=checkbox]:checked')];
    for(i = inps.length;i<inps.length - 1 ;i--){
        let num = inps[i].parentNode.parentNode.getAttribute('data-id').split('-'),
            index1 = num[0],
            index2 = num[1];
            console.log(num)
        datas[index1].list.splice(index2,1)
        indexNum = index1
        renderData()
        countALL()
    }
}




